<template>
    <div class="container">
        <view-box ref="viewBox">
            <flexbox orient="vertical">

                <flexbox-item>
                    <div class="banner">
                        <div class="bg-banner"></div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="text-box">
                        <div class="title">中国持驾照人群不断增长促进市场商机</div>
                        <div class="content">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            通过这两组数据简单对比，
                            中国拥有驾照的人数是私家车保有量的3倍，
                            还有三分之二持驾照者开车的需求未能得到满足，
                            预计随着时间推移，我国驾照数量会达到8亿，
                            但是 因道路承载量的原因，私家车最多达到2-3亿辆而已
                        </div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="text-box">
                        <div class="title">中国千亿租车市场商机</div>
                        <div class="content">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            阿噹共享汽车打造以租车为核心的综合用车服务商，
                            采取连锁+共享租车模式，
                            总部直营样板店+加盟店连锁标准化管理，
                            定位为中国互联网连锁租车品牌，
                            比传统租车便宜30%！就是便宜又安全的品牌租车。
                        </div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="text-box">
                        <div class="ct">
                            <div class="ct-bg1"></div>
                        </div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="text-box">
                        <div class="content">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            在中国，前五大租车公司市场份额仅占14%，
                            远低于美国、德国、巴西的95%、91%及58%。
                            说明中国租车市场可成长空间巨大，
                            行业前几名的租车公司未来极其光明，
                            预计前五名的公司规模不会低于百万车辆数量级别，
                            大型连锁租车公司必将火速抢占市场。
                        </div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="text-box">
                        <div class="ct">
                            <div class="ct-bg2"></div>
                        </div>
                    </div>
                </flexbox-item>

            </flexbox>
        </view-box>
    </div>
</template>

<script>
    import { ViewBox, Scroller, Swiper, Flexbox, FlexboxItem } from 'vux'
    import BannerImg from '@/assets/swiper/swiper2.png'

    export default {
        name: 'Zcscqj',
        components: {
            ViewBox,
            Scroller,
            Swiper,
            Flexbox,
            FlexboxItem
        },
        data() {
            return {
                BannerImg
            }
        },
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .banner{
        height: 180px;
        display: block;
        .bg-banner{
            width: 100%;
            height: 100%;
            background: url("../../assets/swiper/swiper2.png") center center no-repeat;
            background-size: cover;
        }
    }
    .text-box{
        padding: 0 20px;
        margin-top: 20px;
        .title{
            text-align: center;
            color: #eb5d11;
            font-size: 18px;
            font-weight: bold;
        }
        .content{
            color: #666666;
            font-size: 12px;
        }
        .ct{
            width: 100%;
            height: 400px;
            .ct-bg1{
                width: 100%;
                height: 100%;
                background: url("../../assets/zsjm/p1.jpg") no-repeat;
                //background-size: cover;
                background-size: 100% 100%;
            }
            .ct-bg2{
                width: 100%;
                height: 100%;
                background: url("../../assets/zsjm/p2.jpg") no-repeat;
                //background-size: cover;
                background-size: 100% 100%;
            }

        }
    }
</style>